<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>


<link type="text/css" rel="stylesheet" href="../Public/css/reset.css">
<link type="text/css" rel="stylesheet" href="../Public/css/DateTimePicker.css">
<link type="text/css" rel="stylesheet" href="../Public/css/style.css">

<script type="text/javascript" src="../Public/script/jquery.js"></script>
<script type="text/javascript" src="../Public/script/distpicker.data.js"></script>
<script type="text/javascript" src="../Public/script/distpicker.js"></script>
<script type="text/javascript" src="../Public/script/DateTimePicker.js"></script>
<script type="text/javascript" src="../Public/script/jquery.SuperSlide.2.1.1.js"></script>
<script type="text/javascript" src="../Public/layer/layer.js"></script>
</head>
<body>

<include file="Common:header"/>
    <div style="padding: 4%">
        <div style="border-bottom: 1px solid #9c9fa2;padding: 1%">首页 > 购物车</div>
         
      <form action="{:U('Orders/index')}" method="post">
      <foreach name="gouwu" item="vo" key="k" >
        <div style="display: flex;flex-direction: row;border-bottom: 1px solid #9c9fa2;height: 100px;align-items: center;padding: 0.5%">
            <div class="xuan" style="width: 10%">
                <input type="checkbox" name="id[]" value="{$vo.id}"   >
            </div>
            <div style="width:20%;">
                <img src="Uploads/{$vo.img}" style="height: 90px;width: 65%">
            </div>
            <div style="width: 10%"><span>{$vo.name}</span></div>
            <div style="display: flex;flex-direction: row;width: 15%">
                <div><img src="../Public/images/购物车_09.png"></div><div><span>{$vo.user}</span></div>
            </div>
            <div style="display: flex;flex-direction: row;width: 15%">
                <div><img src="../Public/images/购物车_11.png"></div><div><span>{$vo.huxing}</span></div>
            </div>
            <div style="display: flex;flex-direction: row;width: 15%">
                <div><img src="../Public/images/购物车_13.png"></div><div><span>{$vo.fengge}</span></div>
            </div>
            <div style="display:flex;padding-right: 3%;width: 15%;justify-content: flex-end; ">
                <div style="cursor: pointer; " onclick="shanchu(this,{$vo['id']} )"><img src="../Public/images/删除.png"></div>
            </div>
        </div>
        </foreach>


       <div style="display: flex;flex-direction: row;justify-content: space-between;margin-top: 2%">
            <div style="display: flex;flex-direction: row;width: 15%;align-items: center">

                <div class="quan" style="width: 20%">
                    <input type="checkbox" value="" onclick="checkAll(this)" id="hji" name="">
                </div>
                <div style="margin-left: 1%;width:20%">
                    <span>全选</span>
                </div>
            </div>
            <div style="display: flex;flex-direction: row;justify-content: space-between;
                        width: 20%;text-align: center;color: white;font-size: 13px;align-items: center;">
                <div id="shanchu" style="padding: 3%;background-color: #03a9f4;width: 40%;opacity: 0.2" >删除</div>
                <div id='dianji' style="padding: 3%;background-color: #f44336;width: 40%;cursor: pointer;">下单</div>
            </div>
        </div>
        </form>
    </div>
<script>

function checkAll(obj){

   var hhh= $(".xuan input[type='checkbox']").prop('checked', $(obj).prop('checked'));
      

if ($(hhh).is(':checked')) {

  
$('#shanchu').css('opacity','1');
$('#shanchu').css('cursor','pointer');
$('#shanchu').click(function(){
   $.ajax({
      url:'{:U("User/delete")}',
   
   success:function(data){
    if (data==1) {
      layer.msg('清空购物车',{time:1000},function(){
      location.reload();

      });
    }
   }
   })
  
})

}else{
$('#shanchu').css({"opacity":"0.2","cursor":"none"});
$('#shanchu').click(function(){



})

}





}

function shanchu(obj,id){



   $.ajax({
      url:'{:U("User/del")}',
      type:'post',
      data:{
        id:id
      },
      success:function(data){
           if (data==1) {
             $(obj).parent().parent().remove();
                   location.replace(location.href);

           }
      }
        

   })



}

$(function(){
$('#dianji').click(function(){
if (!$('input[type="checkbox"]').is(':checked')) {
  layer.msg('请选择后下单',{time:1000});
  return false;
}
 
  $('form').submit();
})

})

</script>
</body>
</html>